<template>
    <transition name='fade'>
        <div class="popup mask">
            <transition name='fade'>
                <div class="popup-card" v-show="popupShow">
                    <p v-html="popupText"></p>
                    <div class="popup-tips" v-show="popupTips">{{popupTips}}</div>
                    <div class="popup-btn" v-show="popupType!=2" @click="popupClose()">我知道了</div>
                    <div class="popup-chose clearfix" v-show="popupType==2">
                        <span class="cancel left" @click="popupCancel()">取消</span>
                        <span class="sure right" @click="popupSure()">确定</span>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
export default {
  name: 'popup',
  props:[
     "popupShow",
     "popupType",
     "popupText",
     "popupTips",
  ],
  data () {
    return {
      
    }
  },
  watch:{
    popupShow(newVal,oldVal){
        if(newVal){
            touchFalse() 
        }else{
            touchTrue()
        }
    },
  },
  created:function() {
   
  },
  mounted:function() {

  },
  methods: {
    popupClose(){
        this.$emit('popupClose')
    },
    popupCancel(){
        this.$emit('popupCancel')
    },
    popupSure(){
        this.$emit('popupSure')
    },
  }
}
</script>
<style type="text/css" scoped>
    .popup-card{
        width: 6.3rem;
        margin: 50% auto;
        background: #fff;
        border-radius: 0.44rem;
        text-align: center;
        box-sizing: border-box;
        padding: 0.82rem 0.66rem 0.6rem;
    }  
    .popup-card p{
        font-size: 0.36rem;
        line-height: 0.5rem;
        color: #333;
        font-weight: bold;
    }
    .popup-tips{
        color: #666; 
        font-size: 0.28rem;
        line-height: 0.34rem;
        padding-top: 0.16rem;
    }
    .popup-btn{
        width: 2.28rem;
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.32rem;
        border-radius: 0.44rem;
        color: #fff;
        background: #02affe;
        margin: 0.48rem auto 0;
    }
    .popup-chose{
        font-size: 0.32rem;
        color: #fff;
        margin-top: 0.48rem;
    }
    .popup-chose span{
        width: 2.28rem;
        height: 0.8rem;
        line-height: 0.8rem;
        border-radius: 0.44rem;
    }
    .popup-chose .cancel{
        background: #ebeef2;
        color: #74899e;
    }
    .popup-chose .sure{
        background:#02affe; 
    }
</style>